<template>
  <ElFormItem label="布局方式" label-position="top">
    <ElSegmented v-model="layouts.layout" :options="options" />
  </ElFormItem>
  <ElFormItem label="列数" label-position="top">
    <ElSlider :min="1" :max="24" v-model="layouts.columns" />
  </ElFormItem>
  <ElFormItem label="间距" label-position="top">
    <ElSlider :min="5" :max="20" v-model="layouts.gap" />
  </ElFormItem>
  <!-- 是否需要？ -->
  <!-- <template v-for="item in ohterProps" :key="item.prop">
    <ElFormItem
      :label="item.prop"
      v-if="!item.kind || item.kind === layouts.layout"
    >
      <ElRadioGroup v-model="item.value">
        <ElRadio v-for="op in item.options" :key="op.value" :value="op.value">
          {{ op.label }}
        </ElRadio>
      </ElRadioGroup>
    </ElFormItem>
  </template> -->
</template>

<script setup>
import { ref, watchEffect, inject, reactive } from "vue";

const props = defineProps({
  editorKey: { type: String, required: true },
  state: { type: Object, required: true },
});
const updateComponentConfig = inject("updateComponentConfig");

const layouts = reactive({
  layout: props.state.layoutMode ?? "grid",
  columns: props.state.columns ?? 1,
  gap: props.state.gap ?? 5,
});
const ohterProps = ref([
  {
    prop: "flex-direction",
    value: "row",
    options: [
      { label: "row", value: "row" },
      { label: "column", value: "column" },
      { label: "row-reverse", value: "row-reverse" },
      { label: "column-reverse", value: "column-reverse" },
    ],
    kind: "flex",
  },
  {
    prop: "flex-wrap",
    value: "wrap",
    kind: "flex",
    options: [
      { label: "nowrap", value: "nowrap" },
      { label: "wrap", value: "wrap" },
    ],
  },
  {
    prop: "align-content",
    value: "",
    options: [
      { label: "center", value: "center" },
      { label: "flex-start", value: "flex-start" },
      { label: "flex-end", value: "flex-end" },
      { label: "space-between", value: "space-between" },
      { label: "space-around", value: "space-around" },
      { label: "stretch", value: "stretch" },
    ],
  },
  {
    prop: "align-items",
    value: "",
    options: [
      { label: "center", value: "center" },
      { label: "flex-start", value: "flex-start" },
      { label: "flex-end", value: "flex-end" },
      { label: "stretch", value: "stretch" },
      { label: "baseline", value: "baseline" },
    ],
  },
  {
    prop: "justify-content",
    value: "",
    options: [
      { label: "center", value: "center" },
      { label: "flex-start", value: "flex-start" },
      { label: "flex-end", value: "flex-end" },
      { label: "space-between", value: "space-between" },
      { label: "space-around", value: "space-around" },
      { label: "space-evenly", value: "space-evenly" },
    ],
  },
  {
    prop: "justify-items",
    value: "",
    options: [
      { label: "center", value: "center" },
      { label: "start", value: "start" },
      { label: "end", value: "end" },
      { label: "stretch", value: "stretch" },
    ],
  },
]);

watchEffect(() => {
  if (updateComponentConfig) {
    updateComponentConfig(props.editorKey, { ...layouts });
  }
});

const options = ref([
  {
    label: "Grid 布局",
    value: "grid",
  },
  {
    label: "Flex 布局",
    value: "flex",
  },
]);
</script>

<style scoped>
.container {
  --layoutMode: "flex";
  --columns: 1;
  --gridcolumns: 1;
  display: var(--layoutMode);
  grid-template-columns: repeat(var(--gridcolumns), 1fr);
}
.container .item {
  width: var(calc(100% / var(--columns)), 100%);
}
</style>
